<template>
  <div class="main-con" style="background-color: #f9f9f9; margin: 0 16px">
    <div style="font-weight: 800; font-size: 20px; padding-bottom: 20px">
      {{ summaryData.school.name }}
    </div>
    <a-spin :loading="loading" tip="正在加载..." style="width: 100%">
      <a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 4, xxl: 4 }" :colGap="12" :rowGap="16" style="background-color: #fff; padding: 16px 0">
        <a-grid-item class="panel-col">
          <a-space>
            <img src="@/assets/class@2x-0a6d27e6.png" class="h-icon" alt="" />
            <a-statistic title="班级总数(个)" :value="summaryData.classesCount" :value-from="0" :start="true" animation>
            </a-statistic>
          </a-space>
        </a-grid-item>
        <a-grid-item class="panel-col">
          <a-space>
            <img src="@/assets/student@2x-4ae64e74.png" class="h-icon" alt="" />
            <a-statistic title="学生总数(人)" :value="summaryData.studentCount" :value-from="0" :start="true" animation>
            </a-statistic>
          </a-space>
        </a-grid-item>
        <a-grid-item class="panel-col">
          <a-space>
            <img src="@/assets/male@2x-dfb7c996.png" class="h-icon" alt="" />
            <a-statistic title="男生人数(人)" :value="summaryData.manCount" :value-from="0" :start="true" animation>
            </a-statistic>
          </a-space>
        </a-grid-item>
        <a-grid-item class="panel-col">
          <a-space>
            <img src="@/assets/female@2x-ccf53d21.png" class="h-icon" alt="" />
            <a-statistic title="女生人数(人)" :value="summaryData.womanCount" :value-from="0" :start="true" animation>
            </a-statistic>
          </a-space>
        </a-grid-item>
      </a-grid>
    </a-spin>
    <a-card style="margin-top: 16px">
      <template #title>
        <div style="font-size: 20px; font-weight: 600">体测数据统计</div>
      </template>

      <div>
        <a-space>
          <span style="color: #111; padding-right: 8px"><img src="@/assets/cala.png" style="width: 25px; height: 25px" alt="" /></span>
          <span>体测计划</span>
          <a-select style="width: 200px" v-model="searchGroupParam.planId" @change="querySummaryGroupData" placeholder="选择测试计划查询">
            <a-option v-for="item in planList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
          </a-select>
        </a-space>
      </div>

      <a-spin :loading="loadCountData" style="width: 100%">
        <div class="statistic-card" style="margin-top: 0">
          <div class="card-content">
            <a-grid :cols="{ xs: 2, sm: 4, md: 4, lg: 4, xl: 5, xxl: 6 }" :colGap="20" :rowGap="16">
              <template v-for="(data, key) in summary" :key="key">
                <a-grid-item v-if="getSummaryTitle(key)" class="flex">
                  <div :class="[getSummaryCardColor(key)]" class="flex flex1">
                    <a-statistic :title="getSummaryTitle(key)" :value="data" :precision="0" :value-from="0" :start="true" animation class="custom-statistic" :value-style="key == 'noPassCount' || key == 'noPassRate'
                        ? redValueStyle
                        : {}
                        ">
                    </a-statistic>
                  </div>
                </a-grid-item>
              </template>
            </a-grid>
          </div>
        </div>
      </a-spin>
    </a-card>
    <PlanSummary :data="summary"></PlanSummary>
    <GradeSummary :search-param="searchGroupParam" :data="gradeData"></GradeSummary>
    <ProjectSummary :search-param="searchGroupParam" :data="projectData"></ProjectSummary>
    <ClassesSummary :search-param="searchGroupParam" :data="gradeData"></ClassesSummary>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import schoolApi from "@/api/schoolApi.js";
import summaryApi from "@/api/summaryApi.js";
import GradeSummary from "@/components/charts/GradeSummary.vue";
import ProjectSummary from "@/components/charts/ProjectSummary.vue";
import ClassesSummary from "@/components/charts/ClassesSummary.vue";
import PlanSummary from "@/components/charts/PlanSummary.vue";


const router = useRouter();
const selectedKeys = ref([]);
const params = history.state.params;

const headerStyle = {
  borderBottom: "none",
  fontSize: "18px",
};

const redValueStyle = {
  color: "red",
};




const planList = ref([]);

const loading = ref(false);
const loadCountData = ref(false);

const gradeData = ref([]);
const projectData = ref([]);

const searchGroupParam = reactive({
  schoolId: params.schoolId,
  planId: "",
});

const summary = ref({
  totalCount: 0,
  testCount: 0,
  freeTestCount: 0,
  bestCount: 0,
  bestRate: 0.0,
  wellCount: 0,
  wellRate: 0.0,
  passCount: 0,
  passRate: 0.0,
  noPassCount: 0,
  noPassRate: 0.0,
});
const summaryData = ref({
  school: {},
  classesCount: 0,
  studentCount: 0,
  manCount: 0,
  womanCOunt: 0,
});



const getSummaryCardColor = (key) => {
  let color = "blue";
  switch (key) {
    case "totalCount":
    case "bestCount":
    case "passCount":
    case "wellCount":
      color = "yellow";
      break;
  }
  return color;
};

const getSummaryTitle = (key) => {
  let title = "";
  switch (key) {
    case "totalCount":
      title = "学生人数（人）";
      break;
    case "testCount":
      title = "实测人数（人）";
      break;
    case "freeTestCount":
      title = "免测人数（人）";
      break;
    case "bestCount":
      title = "优秀人数（人）";
      break;
    case "bestRate":
      title = "优秀率（%）";
      break;
    case "wellCount":
      title = "良好人数（人）";
      break;
    case "wellRate":
      title = "良好率（%）";
      break;
    case "passCount":
      title = "及格人数（人）";
      break;
    case "passRate":
      title = "及格率（%）";
      break;
    case "noPassCount":
      title = "不及格人数（人）";
      break;
    case "noPassRate":
      title = "不及格率（%）";
      break;
  }
  return title;
};

const getSummaryData = () => {
  loading.value = true;
  schoolApi.summaryData(params).then((res) => {
    summaryData.value = res;
    loading.value = false;
  });
};

const queryPlanList = () => {
  summaryApi
    .queryPlanList({
      schoolId: params.schoolId,
    })
    .then((res) => {
      planList.value = res;
    });
};

const querySummaryGroupData = () => {
  loadCountData.value = true;
  summaryApi.queryData(searchGroupParam).then((res) => {
    summary.value = Object.assign(summary.value, res.summary);
    gradeData.value = res.grade;
    projectData.value = res.project;
    loadCountData.value = false;
  });
};

getSummaryData();
queryPlanList();
</script>
<style @scoped>
.panel-col {
  padding-left: 43px;
  border-right: 1px solid rgb(var(--gray-2));
}

.arco-statistic-content .arco-statistic-value-integer {
  font-size: 24px !important;
  white-space: nowrap;
  font-weight: 700;
}

.h-icon {
  width: 54px;
  height: 54px;
  margin-right: 10px;
}
</style>